<nav class="kh-nav" :class="{'kh-home-hidden': isShow}">
    <div class="kh-nav-menu-main">
        <ul>
            <li>
                <a href="../pages/blog-home.html" class="kh-nav-menu kh-nav-menu-actv">Home</a>
            </li>
            <li>
                <a href="javascript:;" class="kh-nav-menu">Case</a>
            </li>
            <li>
                <a href="../pages/blog-article.html" class="kh-nav-menu">Article</a>
            </li>
            <li>
                <a href="../pages/blog-details.html" class="kh-nav-menu">Practice</a>
            </li>
            <li>
                <a href="javascript:;" class="kh-nav-menu">About</a>
            </li>
        </ul>
    </div>
</nav>

<style>
    .kh-nav {
        z-index: 100;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #D8ECEB;
        transition: all .5s;
    }


    .kh-nav-menu-main {
        text-align: center;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); }
    .kh-nav-menu-main .kh-nav-menu {
        display: block;
        font-size: 24px;
        color: #000;
        opacity: .6;
        padding-bottom: 26px;
        margin-bottom: 40px;
        position: relative; }
    .kh-nav-menu-main .kh-nav-menu:hover {
        opacity: 1; }
    .kh-nav-menu-main .kh-nav-menu:hover:after {
        transform: rotateY(360deg); }
    .kh-nav-menu-main .kh-nav-menu:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: calc(50% - 10px);
        width: 20px;
        height: 20px;
        transform: rotateY(0);
        background-image: url("../../../src/blog-img/kh-nav-rotate.png");
        background-size: 100%;
        background-position: center;
        background-repeat: no-repeat;
        transition: transform 1s; }
    .kh-nav-menu-main .kh-nav-menu-actv {
        opacity: 1; }
    .kh-nav-menu-main .kh-nav-menu-actv:after {
        transform: rotateY(360deg) translateZ(0); }

</style>

<script>

</script>